<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <script src="js/menu1.js"></script>
    <script>
        window.onload = function () {
            initData()
        }
        function initData() {
            var ul = document.getElementById('foods')
            var strHTML = ''


            for (var i = 0; i < data.length; i++) {

                if (data[i].select == "hot") {
                    strHTML += `
                    <li>
                <div class="pic"> <img src="${data[i].image}" alt=""></div>

                <div class="foodname">
                    <b>${data[i].name}</b>
                    <p>${data[i].food}</p>
                   
                    <p><img src="${data[i].image1}" alt="">${data[i].name1}</p>
                </div>
                 </li> `
                }
            }
            ul.innerHTML = strHTML

        }

    </script>
    <style>
        
        main {
            width: 1000px;
            height: 1000px;

            margin: 0 auto;

        }

        h2 {
            padding: 10px;
        }
        #fenlei{
            height: 30px;
            margin-left: 10px;
        }
       

        #foods {
            list-style: none;
            height: 220px;
        }

        #foods li {
            width: 100%;
            height: 220px;
           
        }

        .pic {
            width: 300px;
            height: 200px;

            float: left;
            margin-left: 10px;


        }

        .pic img {
            width: 300px;
            height: 180px;
            border-radius: 10px;
        }

        .foodname {
            float: left;
            padding: 10px;
            /* transform: translate(-50%,-50%); */

        }

        .foodname :nth-child(1) {
            font-size: 1.5em;
        }

        .foodname :nth-child(2),
        .foodname :nth-child(3) {
            padding: 20px 0px;
        }

        .foodname p img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <main>
        <ol class="breadcrumb">
        <li><a href="Menu1.html">菜谱</a> </li>
        <li><a href="MenuChild.html">菜谱分类</a> </li>
        <li class="active">热菜 </li></ol>
        <h2>相关菜谱</h2>
        <ul id="fenlei" class="list-unstyled list-inline" >
            <li>热菜</li>
            <li>凉菜</li>
            <li>汤</li>
        </ul>
        <ul id="foods">
            <!-- <li>
                <div class="pic"> <img src="images/z3.jpg" alt=""></div>

                <div class="foodname">
                    <b>排骨炖豆角</b>
                    <p>排骨,土豆,豆角,姜,葱,蒜,八角,花椒,红烧酱油,生抽,料酒,黄豆酱,蚝油,盐,糖 </p>
                    <b>热菜</b>
                    <p><img src="images/btouxiang26.PNG" alt="">薇·妙滋味</p>
                </div>


            </li> -->
        </ul>
    </main>

</body>

</html>